<template>


  <!-- <Col> -->
    <Panel shadow>
      <!-- <div slot="title">{{$t('m.Problem_List')}}</div> -->
      <div style="justify-content: center;display: flex;margin-top: -10px; ">
        <Input v-model="query.keyword"
                  @on-enter="filterByKeyword"
                  @on-click="filterByKeyword"
                  placeholder="搜索题目"
                  style="width:500px;"
                  icon="ios-search-strong"/>
      </div>
      <div slot="extra" style="margin-top: 10px;" >
        <ul class="filter">
          
          <!-- <li>
            <Button type="info" @click="onReset">
              <Icon type="refresh"></Icon>
              {{$t('m.Reset')}}
            </Button>
          </li> -->
          <li>
            <Button type="default"  @click="switchTag">
              <Icon type="ios-tag"></Icon>
              筛选
            </Button>                
          </li>
          <li>
            <Dropdown @on-click="filterByDifficulty">
              <span>{{query.difficulty === '' ? this.$i18n.t('m.Difficulty') : this.$i18n.t('m.' + query.difficulty)}}
                <Icon type="arrow-down-b"></Icon>
              </span>
              <Dropdown-menu slot="list">
                <Dropdown-item name="">{{$t('m.All')}}</Dropdown-item>
                <Dropdown-item name="Low">{{$t('m.Low')}}</Dropdown-item>
                <Dropdown-item name="Mid" >{{$t('m.Mid')}}</Dropdown-item>
                <Dropdown-item name="High">{{$t('m.High')}}</Dropdown-item>
              </Dropdown-menu>
            </Dropdown>
          </li>
          <li>
            <i-switch size="large" @on-change="handleTagsVisible">
              <span slot="open">{{$t('m.Tags')}}</span>
              <span slot="close">{{$t('m.Tags')}}</span>
            </i-switch>
          </li>
          
        </ul>
      </div>
      <div style="display: flex;justify-content: center;">

        <Pagination
          :total="total" 
          :page-size.sync="query.limit" 
          @on-change="pushRouter"
          @on-page-size-change="pushRouter" 
          :current.sync="query.page" 
          :show-sizer="true">
        </Pagination>
      </div>

      <div style="display: flex; flex-direction: row;font-weight: 800; margin-left: 50px;flex-wrap: wrap;margin-bottom: 20px;align-items: center; ">
        <div style="font-size: 18px;margin-right: 20px; "  >题库</div>
        <div :class="setcs('')" @click="filterByTag('')">主题库</div>
        <div :class="setcs('一本通练习题')" @click="filterByTag('一本通练习题')">一本通练习题</div>
        <div :class="setcs('CSP 入门组')" @click="filterByTag('CSP 入门组')">CSP入门组真题</div>
        <div :class="setcs('CSP 提高组')" @click="filterByTag('CSP 提高组')">CSP提高组真题</div>
        <div :class="setcs('USACO')" @click="filterByTag('USACO')">USACO月赛</div>
      </div>
      <div v-if="showTag" >
        <div class="tag">
          <Button v-for="tag in tagList"
                :key="tag.name"
                @click="filterByTag(tag.name)"
                type="ghost"
                :disabled="query.tag === tag.name"
                shape="circle"
                class="tag-btn">{{tag.name}}
        </Button>

        <!-- <Button long id="pick-one" @click="pickone">
          <Icon type="shuffle"></Icon>
          {{$t('m.Pick_One')}}
        </Button> -->
        </div>
        
        <Spin v-if="loadings.tag" fix size="large"></Spin>
      </div>
      <Table style="width: 100%; font-size: 20px;"
            :columns="problemTableColumns"
            :data="problemList"
            :loading="loadings.table"
            stripe
            disabled-hover></Table>
    </Panel>
  
  <!-- </Col> -->

</template>

<script>
  import { mapGetters } from 'vuex'
  import api from '@oj/api'
  import utils from '@/utils/utils'
  import { ProblemMixin } from '@oj/components/mixins'
  import Pagination from '@oj/components/Pagination'

  export default {
    name: 'ProblemList',
    mixins: [ProblemMixin],
    components: {
      Pagination
    },
    data () {
      return {
        problemset: '',
        showTag: false,
        tagList: [],
        problemTableColumns: [
          {
            title: '#',
            key: '_id',
            width: 120,
            align: 'center',
            fontSize: '20',
            render: (h, params) => {
              return h('Button', {
                props: {
                  type: 'text',
                  size: 'large'
                },
                on: {
                  click: () => {
                    const {href} = this.$router.resolve({
                      name: 'problem-details',
                      params: {problemID: params.row._id}
                    })
                    window.open(href, '_blank')
                    // this.$router.push({name: 'problem-details', params: {problemID: params.row._id}})
                  }
                },
                style: {
                  padding: '2px 0'
                }
              }, params.row._id)
            }
          },
          {
            title: this.$i18n.t('m.Title'),
            // width: 400,
            align: 'left',
            className: 'test-name',
            render: (h, params) => {
              return h('div', {
                props: {
                  type: 'text',
                  size: 'large'
                },
                on: {
                  click: () => {
                    const {href} = this.$router.resolve({
                      name: 'problem-details',
                      params: {problemID: params.row._id}
                    })
                    window.open(href, '_blank')
                    // this.$router.push({name: 'problem-details', params: {problemID: params.row._id}})
                  }
                },
                style: {
                  color: '#3d80ba',
                  padding: '2px 0',
                  overflowX: 'auto',
                  textAlign: 'left',
                  width: '100%',
                  fontSize: '14px',
                  cursor: 'pointer'
                }
              }, params.row.title)
            }
          },
          {
            title: this.$i18n.t('m.AC_Rate'),
            width: 100,
            align: 'center',
            render: (h, params) => {
              return h('span', {style: { float: 'center', textAlign: 'center', with: '100px' }}, this.getACRate(params.row.accepted_number, params.row.submission_number))
            }
          },
          {
            title: this.$i18n.t('m.Level'),
            align: 'center',
            width: 100,
            render: (h, params) => {
              let t = params.row.difficulty
              let color = 'blue'
              if (t === 'Low') color = 'green'
              else if (t === 'High') color = 'yellow'
              return h('Tag', {
                props: {
                  color: color
                },
                style: {
                  float: 'center',
                  textAlign: 'center',
                  with: '100px'
                }
              }, this.$i18n.t('m.' + params.row.difficulty))
            }
          }
        ],
        problemList: [],
        limit: 50,
        total: 0,
        loadings: {
          table: true,
          tag: true
        },
        routeName: '',
        query: {
          keyword: '',
          difficulty: '',
          tag: '',
          page: 1,
          limit: 50
        }
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init (simulate = false) {
        this.routeName = this.$route.name
        let query = this.$route.query
        this.query.difficulty = query.difficulty || ''
        this.query.keyword = query.keyword || ''
        this.query.tag = query.tag || ''
        this.query.page = parseInt(query.page) || 1
        if (this.query.page < 1) {
          this.query.page = 1
        }
        this.query.limit = parseInt(query.limit) || 50
        if (!simulate) {
          this.getTagList()
        }
        this.getProblemList()
      },
      switchTag () {
        if (this.showTag) {
          this.showTag = false
        } else {
          this.showTag = true
        }
      },
      pushRouter () {
        this.$router.push({
          name: 'problem-list',
          query: utils.filterEmptyValue(this.query)
        })
      },
      getProblemList () {
        let offset = (this.query.page - 1) * this.query.limit
        this.loadings.table = true
        api.getProblemList(offset, this.limit, this.query).then(res => {
          this.loadings.table = false
          this.total = res.data.data.total
          this.problemList = res.data.data.results
          if (this.isAuthenticated) {
            this.addStatusColumn(this.problemTableColumns, res.data.data.results)
          }
        }, res => {
          this.loadings.table = false
        })
      },
      getTagList () {
        api.getProblemTagList().then(res => {
          this.tagList = res.data.data
          this.loadings.tag = false
        }, res => {
          this.loadings.tag = false
        })
      },
      filterByTag (tagName) {
        this.problemset = tagName
        this.query.tag = tagName
        this.query.page = 1
        this.pushRouter()
      },
      filterByDifficulty (difficulty) {
        this.query.difficulty = difficulty
        this.query.page = 1
        this.pushRouter()
      },
      filterByKeyword () {
        this.query.page = 1
        this.pushRouter()
      },
      handleTagsVisible (value) {
        let len = this.problemTableColumns.length
        if (value) {
          this.problemTableColumns.splice(len - 2, 0, {
            title: this.$i18n.t('m.Tags'),
            align: 'right',
            render: (h, params) => {
              let tags = []
              params.row.tags.forEach(tag => {
                tags.push(h('Tag', {}, tag))
              })
              return h('div', {
                style: {
                  margin: '8px 0'
                }
              }, tags)
            }
          })
        } else {
          this.problemTableColumns.splice(len - 3, 1)
        }
      },
      onReset () {
        this.$router.push({name: 'problem-list'})
      },
      pickone () {
        api.pickone().then(res => {
          this.$success('Good Luck')
          this.$router.push({name: 'problem-details', params: {problemID: res.data.data}})
        })
      },
      setcs (name) {
        if (name === this.problemset) {
          return 'setselected'
        } else {
          return 'unsetselected'
        }
      }
    },
    computed: {
      ...mapGetters(['isAuthenticated'])
    },
    watch: {
      '$route' (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.init(true)
        }
      },
      'isAuthenticated' (newVal) {
        if (newVal === true) {
          this.init()
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .taglist-title {
    margin-left: -10px;
    margin-bottom: -10px;
  }

  .tag-btn {
    border-radius: 12px;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    background-color: #42a8f7;
    color: #f2f8fc;
    font-weight: 600;
    font-size:small
  }

  #pick-one {
    margin-top: 10px;
  }
  .tag {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    margin: 20px;
    border: 5px;
    shape-outside: margin-box;
    // border-style:solid;
    box-shadow:0 2px 7px 3px rgba(0, 0, 0, .12);
    
  }

  .setselected {
    padding: 5px 10px;
    margin: 3px;
    background-color: #64b3ef;
    font-size: 14px;
    color:#ffffff;
    border-radius: 15px;
    cursor: pointer;
    font-weight: 500;
  }
  .unsetselected {
    padding: 5px 10px;
    margin: 3px;
    font-size: 14px;
    color:#2185d0;
    border-radius: 15px;
    cursor: pointer;
    border: 1px solid rgb(81, 175, 238);
    font-weight: 500;
  }


</style>
